<template>
    <PageWrapper>
      <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1280px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.username"
                clearable
                placeholder="请输入用户名"
                @keyup.enter="reloadTable"
                />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.danhao"
                clearable
                placeholder="请输入流水号"
                @keyup.enter="reloadTable"
                />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.roleid" placeholder="请选择角色" style="width: 200px;margin-left: 20px;" :options="roleOptions" clearable />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.status" placeholder="请选择提现状态" style="width: 200px;margin-left: 20px;" :options="options" clearable />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.pingtai" placeholder="请选择平台" style="width: 200px;margin-left: 20px;" :options="optionspt" clearable />
            </div>
          </n-input-group>
          <n-input-group style="width: 1280px">
            <div style="margin-left: 30px !important;display: flex;align-items: center;">
              <n-date-picker v-model:value="range" type="daterange"  @update:value="onChange4" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
        <div class="wenzi">
          <span class="shouyi">提现总额:</span><span class="money">{{cashData.zmoney}}元</span>
          <span class="yue">实际打款:</span><span class="money">{{cashData.sjmoney}}元</span>
          <span class="yue">手续费:</span><span class="money">{{cashData.sxfmoney}}元</span>
          <span class="yue">待审核:</span><span class="money">{{cashData.dshmoney}}元</span>
          <span class="yue">未提现:</span><span class="money">{{cashData.yue}}元</span>
        </div>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          virtual-scroll
        >
        </BasicTable>
      </n-card>

      <CreateDrawer
        ref="createDrawerRef"
        :title="drawerTitle"
        :roleList="roleData"
        @change="reloadTable"
      />
    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref, onMounted } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
    import { SearchOutlined } from '@vicons/antd';
    import CreateDrawer from './CreateDrawer.vue';
    import { columns } from './columns';
    import { cashlist,cashDel,cashdata } from '@/api/financial/index';

    const message = useMessage();
    const basicTableRef = ref();
    const tableData = ref();
    const cashData = ref({
      zmoney: 0,
      yue: 0,
      sjmoney: 0,
      dshmoney: 0,
      sxfmoney: 0,
    });
    const range = ref<[number, number]>();
    const createDrawerRef = ref();
    const drawerTitle = ref();
    const roleData = ref([]);
  
    const params = reactive({
      username: '',
      danhao: '',
      status: null,
      sdate: '',
      edate: '',
      roleid: null,
      pingtai: null,
    });

    const roleOptions = ref([
      {
        label: "用户",
        value: 10,
      }, {
        label: '商户',
        value: 12
      }, {
        label: '代理商',
        value: 11
      }, {
        label: '员工',
        value: 13
      },
    ]);

    const options = ref([
      {
        label: "待审核",
        value: 0,
      },
      {
        label: '提现成功',
        value: 1
      },
      {
        label: '撤回',
        value: 2
      },
      {
        label: "退回",
        value: 3,
      },
      {
        label: "失败",
        value: 4,
      },
      {
        label: "审核中",
        value: 5,
      }
    ])

    const optionspt = ref([
      {
        label: "微信小程序",
        value: 1,
      },
      {
        label: '抖音小程序',
        value: 2
      },
      {
        label: '支付宝小程序',
        value: 3
      }
    ])

    // 操作
    const actionColumn: BasicColumn = reactive({
      width: 150,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        if(record.status == 0){
          return h(TableAction as any, {
            actions: [
              {
                label: '审核',
                onClick: handleEdit.bind(null, record),
              },{
                label: '删除',
                onPositiveClick: handleDelete.bind(null, record),
                isConfirm: true,
                confirmContent: '您确定要删除吗？',
              },
            ],
          });
        }else{
          return h(TableAction as any, {
            actions: [
              {
                label: '删除',
                onPositiveClick: handleDelete.bind(null, record),
                isConfirm: true,
                confirmContent: '您确定要删除吗？',
              },
            ],
          });
        }
      },
    });
  
    //列表数据
    const loadDataTable = async (res) => {
      const result = await cashlist({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };

    // 审核
    function handleEdit(record: Recordable){
      drawerTitle.value = '审核信息';
      const { openDrawer } = createDrawerRef.value;
      openDrawer(record.id);
    }
    
    //删除
    function handleDelete(record: Recordable) {
      cashDel({ id: record.id }).then(() => {
        message.success('删除成功');
        reloadTable();
      });
    }

    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();

      cashdata({ ...params }).then((res) => {
        cashData.value = res;
      });
    }

    function onChange4(v: number){
      if(v != null){
        params.sdate = v[0];
        params.edate = v[1];
      }else{
        params.sdate = '';
        params.edate = '';
      }
    }

    onMounted(async () => {
      const res1 = await cashdata({ ...params });
      cashData.value = res1
    });
  
  </script>
  
<style lang="less" scoped>
  .wenzi{
    margin-top: 20px;
    margin-left: 2%;
    font-size: 18px;

    .shouyi{
      margin-right: 10px;
    }

    .yue{
      margin-left: 30px;
      margin-right: 10px;
    }

    .money{
      color: red;
      font-weight: 700;
    }
  }

</style>
  